<template>
	<view class="vuelist u-skeleton">
		<scrollVue  class="vuelistbox ">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in vuelist" :key="item.id" @click="click"
				@open="open" :options="options" class="uswipe u-skeleton-rect">
				<view class="item u-border-bottom ">
					<image mode="aspectFill" src="../../static/img/vue.png" />
					<view class="title-wrap">
						<text class="title u-line-2">{{ item.title }}</text>
					</view>
				</view>
			</u-swipe-action>
		</scrollVue>

	<u-empty text="包好意思数据没有啦" mode="search" class="empty" v-if='false'></u-empty>
<u-no-network></u-no-network>

	</view>
</template>

<script setup>
import scrollVue from '@/components/scroll.vue'
const options = [
	{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}
]
const click = (index) => {
	console.log(index);
}
const open = (index) => {
	console.log(index);
}
const vuelist = [
	{
		id: 1,
		title: 'vue基础',
		images: 'https://i.postimg.cc/3wrw9wwT/0baec281f386824fe4b3be46d2f6edb6.jpg',
		show: false
	},
	{
		id: 2,
		title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
		images: 'https://i.postimg.cc/3wrw9wwT/0baec281f386824fe4b3be46d2f6edb6.jpg',
		show: false
	},
	{
		id: 3,
		title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
		images: 'https://i.postimg.cc/3wrw9wwT/0baec281f386824fe4b3be46d2f6edb6.jpg',
		show: false
	}
]
</script>

<style lang="scss" scoped>
.vuelist {
	height: calc(100vh - 80rpx);
	width: 100%;
/* #ifndef APP-PLUS */
padding: 10rpx;
/* #endif */
.vuelistbox{
	height: 100%;
	.uswipe{
		margin-bottom: 10rpx;
	}
}
}

.item {
	display: flex;
	padding: 20rpx;


}

image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	margin-right: 20rpx;
	border-radius: 12rpx;
}

.title {
	text-align: left;
	font-size: 28rpx;
	color: black;
	font-weight: bold;
	margin-top: 20rpx;
}

</style>